<template>
  <div class="servicePackageList padding_20">
    <el-input v-model="searchCondition"
              placeholder="请输入医生姓名"
              class="w-200"
              clearable
              @clear="handleQuery" />
    <Select v-model="hospitalId"
            filterable
            remote
            :remote-method="remoteMethod1"
            :loading="loading1"
            class="w-200">
      <Option v-for="(option, index) in options1"
              :value="option.id"
              :key="index">{{option.name}}</Option>
    </Select>
    <el-button type="primary"
               @click="handleQuery">查 询</el-button>
    <el-button type="primary"
               @click="showEdit(null)">新 增</el-button>
    <!--病种列表-->
    <Table stripe
           border
           :columns="titles"
           :data="dataList"
           class="mt-20">
      <template slot-scope="{row,index}"
                slot="action">
        <span @click="deleteObj(index)">删除</span>
      </template>
    </Table>
    <!--分页-->
    <Page :current.sync="currentPage"
          :total="totals"
          :page-size="pageSize"
          @on-change="initTableData"
          show-total />

    <Modal width="700px"
           v-model="editModel"
           class-name="vertical-center-modal"
           title="转诊经办人配置"
           @on-ok="saveConfig">
      <div class="padding_15">
        <Select v-model="configHospitalId"
                filterable
                remote
                clearable
                :remote-method="remoteMethod1"
                :loading="loading1"
                class="input_1"
                @on-change="loadHospitalDoctor"
                placeholder="请选择医院">
          <Option v-for="(option, index) in options1"
                  :value="option.id"
                  :key="index">{{option.name}}</Option>
        </Select>
      </div>
      <Table border
             :columns="configDoctorTitles"
             :data="hospitalDoctorList"
             @on-selection-change="changeDoctors">
        <template slot-scope="{row,index}"
                  slot="action">
          <span @click="showEdit(index)">编辑</span>
          <span @click="deleteObj(index)">删除</span>
        </template>
      </Table>
      <Page :current.sync="dcurrentPage"
            :total="dtotals"
            :page-size="dpageSize"
            @on-change="loadHospitalDoctor"
            show-total />

    </Modal>

    <Modal width="600px"
           v-model="imageModal"
           class-name="vertical-center-modal">
      <img :src="imageUrl"
           width="570px"
           height="570px" />
    </Modal>
  </div>
</template>

<script>
  export default {
    name: "referralAdminConfig",
    data () {
      let vm = this;
      return {
        searchCondition: null,
        hospitalId: null,
        currentPage: 1,
        totals: 0,
        pageSize: 20,
        dcurrentPage: 1,
        dtotals: 0,
        dpageSize: 10,
        imageUrl: null,
        imageModal: false,
        configHospitalId: null,
        loading1: false,
        editModel: false,
        titles: [
          {
            title: '头像',
            key: 'headImageUrl',
            width: 95,
            render: (h, params) => {
              return h('div', [
                h('img', {
                  attrs: {
                    src: params.row.headImageUrl
                  },
                  style: {
                    width: '60px',
                    height: '60px',
                    'border-radius': '50%'
                  },
                  on: {
                    click: (event) => {
                      vm.showBigImage(params.row.headImageUrl);
                    }
                  }
                }),
              ]);
            }
          },
          {
            title: '医生姓名',
            key: 'doctorName'
          },
          {
            title: '医院',
            key: 'hospitalName'
          },
          {
            title: '科室',
            key: 'departmentName'
          },
          {
            title: '职称',
            key: 'doctorTitleName'
          },
          {
            title: '类型',
            key: 'referralType',
            width: 100,
            render: (h, params) => {
              if (params.row.referralType == 1) {
                return h('div', [
                  h("div", [h('span', {
                    style: {
                      color: '#2CB044'
                    }
                  }, "转入/转出")]),
                ]);
              } else if (params.row.referralType == 2) {
                return h('div', [
                  h("div", [h('span', {
                    style: {
                      color: '#2CB044'
                    }
                  }, "转入")]),
                ]);
              } else if (params.row.referralType == 3) {
                return h('div', [
                  h("div", [h('span', {
                    style: {
                      color: '#2CB044'
                    }
                  }, "转出")]),
                ]);
              }
            }
          },
          {
            title: '创建时间',
            key: 'createTime',
            render: (h, params) => {
              return h('span',
                this.commonFunction.timestampFormat(new Date(params.row.createTime), 'yyyy-MM-dd hh:mm:ss'));
            }
          },
          {
            title: '操作',
            slot: 'action',
            align: 'center',
            width: 100
          }
        ],
        configDoctorTitles: [
          {
            title: '选择',
            key: 'checkBox',
            type: 'selection',
            width: 50
          },
          {
            title: '头像',
            key: 'headImageUrl',
            width: 80,
            render: (h, params) => {
              return h('div', [
                h('img', {
                  attrs: {
                    src: params.row.headImageUrl
                  },
                  style: {
                    width: '30px',
                    height: '30px',
                    'border-radius': '50%'
                  },
                  on: {
                    click: (event) => {
                      vm.showBigImage(params.row.headImageUrl);
                    }
                  }
                }),
              ]);
            }
          },
          {
            title: '医生姓名',
            key: 'nickName'
          },
          {
            title: '科室',
            key: 'departmentName'
          },
          {
            title: '职称',
            key: 'positionName'
          }
        ],
        dataList: [],
        options1: [],
        hospitalDoctorList: [],
        selectionDoctor: [],
      }
    },
    created () {
      this.initTableData();
    },
    methods: {
      handleQuery() {
        this.currentPage = 1
        this.initTableData()
      },
      initTableData () {

        let param = {
          "searchCondition": this.searchCondition,
          "hospitalId": this.hospitalId,
          "pageIndex": this.currentPage - 1,
          "pageSize": this.pageSize
        };
        this.post(this.api.referralDoctorConfig.getReferralDoctorList, param).then((res) => {
          if (res.data.code === '200') {
            this.dataList = res.data.object;
            this.totals = res.data.totalNum;
          } else {
            this.$Message.error(res.data.message);
          }
        });
      },
      showEdit (index) {
        this.editModel = true;
        this.options1 = [];
        this.hospitalDoctorList = [];
        this.selectionDoctor = [];
        this.configHospitalId = null;
        this.dcurrentPage = 1;
        this.dtotals = 0;
      },
      deleteObj (index) {
        let obj = this.dataList[index];
        this.post(this.api.referralDoctorConfig.deleteDoctor, obj).then((res) => {
          this.initTableData();
        });
      },
      remoteMethod1 (query) {
        if (query !== '') {
          this.loading1 = true;
          this.post(this.api.searchHospital, { "pageSize": 20, "pageStart": 0, "name": query }).then((res) => {
            this.options1 = res.data.object;
          });
        } else {
          this.options1 = [];
        }
        this.loading1 = false;
      },
      showBigImage (url) {
        this.imageUrl = url;
        this.imageModal = true;
      },
      loadHospitalDoctor () {
        let param = {
          nickName: this.nickName,
          hospitalId: this.configHospitalId,
          isAuth: 2,
          pageSize: this.dpageSize,
          pageIndex: this.dcurrentPage - 1,
        };
        this.post(this.api.doctorManager.list, param).then((res) => {
          if (res.data.code === '200') {
            this.hospitalDoctorList = res.data.object;
            this.dtotals = res.data.totalNum;
          }
        });
      },
      changeDoctors (selection) {
        this.selectionDoctor = selection;
      },
      saveConfig () {
        if (this.configHospitalId == null || this.configHospitalId == undefined || this.configHospitalId <= 0) {
          this.$Message.error("请选择医院");
          return;
        }
        if (this.selectionDoctor == null || this.selectionDoctor == undefined || this.selectionDoctor.length <= 0) {
          this.$Message.error("请选择医生");
          return;
        }

        let param = {
          "hospitalId": this.configHospitalId,
          "jsonData": this.selectionDoctor
        };
        this.post(this.api.referralDoctorConfig.uploadInfo, param).then((res) => {
          if (res.data.code === '200') {
            this.initTableData();
          } else {
            this.$Message.error(res.data.message);
          }
        });

      }
    }
  }
</script>

<style scoped>
</style>
